import React, { useState, useContext, useEffect } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import { Row, Col, Media, Modal, ModalBody, ModalHeader } from "reactstrap";
import { CurrencyContext } from "../../../helpers/Currency/CurrencyContext";
import CartContext from "../../../helpers/cart";
import { getTwoDecimal } from "../../../tools/tools";

const ProductItem = ({
  product,
  addCart,
  spanClass,
  fileServerUrl
}) => {

  const curContext = useContext(CurrencyContext);
  const currency = curContext.state;
  const router = useRouter();


  const linkToDetail = () => {
    router.push(`/product-details/${product.product_id}`);
  }
  // const [modal, setModal] = useState(false);
  // const toggle = () => setModal(!modal);

  return (
    <div className="product-box product-wrap">
      <div className="img-wrapper" style={{ display: 'flex', justifyContent: 'center' }}> 
        <div className="front" style={{ height: 200 }}>
          <a href={null}>
            <Media
              alt=""
              style={{ height: "100%" }}
              src={product.product_media1 != '' ? fileServerUrl + '/' + product.product_media1 : fileServerUrl + '/products/default.jpg'}
              className="img-fluid blur-up lazyload bg-img"
            />
          </a>
        </div>
        <div className="cart-info cart-wrap">
          <button onClick={addCart} title="Add to cart">
            <i className="fa fa-shopping-cart"></i>
            {spanClass ? <span>Add to cart</span> : ""}
          </button>
        </div>
        <div className="quick-view-part">
          <a
            className="mobile-quick-view"
            href={null}
            data-toggle="modal"
            data-target="#quick-view"
            title="Quick View"
            onClick={linkToDetail}
          >
            <i className="fa fa-search" aria-hidden="true"></i>
          </a>
        </div>
      </div>
      <div className="product-info">
        <h6>{product.product_name}</h6>
        <h4>
          {currency.symbol}
          {(
            getTwoDecimal(product.product_price)
            // (product.price - (product.price * product.discount) / 100) *
            // currency.value
          )}
          {/* 可显示折扣价格 */}
          {/* <del>
            <span className="money">
              {currency.symbol}
              {(product.price * currency.value).toFixed(2)}
            </span>
          </del> */}
        </h4>
      </div>
    </div>
  );
};

export default ProductItem;
